<template>
	<view class="form">
		<view class="form-item">
			<view class="label">
				<text>申诉说明</text>
			</view>
			<view class="zdy-input">
				<uv-textarea v-model="queryform.description" border="none" placeholder="请输入申诉说明"></uv-textarea>
			</view>
		</view>
		<view class="form-item">
			<view class="label">
				<text>上传图片</text>
				<text class="tips">（最多6张）</text>
			</view>
			<view class="uplaods" @click="handChooseImg('picture')">
				<view class="upload" v-for="(item, index) in queryform.picture" :key="index">
					<image :src="item" mode="aspectFill"></image>
					<view class="del" @click.stop="handDel(index, 'picture')">
						<uv-icon name="trash" color="orangered"></uv-icon>
					</view>
				</view>
				<view class="upload" v-if="queryform.picture.length < 6">
					<image src="/static/icon/coverupload.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="submit">
			<button class="cu-btn" @click="handSubmit">提交</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		doAppeal
	} from '@/apis/order.js'
	import uploadFile from '@/utils/ossutil/uploadFile.js'
	const {
		proxy
	} = getCurrentInstance();
	const $back = inject('$back')


	const queryform = ref({
		description: '',
		picture: []
	})

	const handSubmit = async () => {
		const params = uni.$uv.deepClone(queryform.value)
		if (!params.description) {
			uni.$uv.toast('请输入申诉说明')
			return
		}
		params.picture = params.picture.toString()
		await doAppeal(params)
		uni.$uv.toast('已提交申诉')
		const eventChannel = proxy.getOpenerEventChannel()
		eventChannel.emit('successEvent');
		setTimeout(() => {
			$back()
		}, 500)
	}

	const handChooseImg = (name) => {
		uni.chooseImage({
			count: name === 'coverPlan' ? 1 : 6 - queryform.value[name].length,
			success: (res) => {
				res.tempFilePaths.forEach(el => {
					uploadFile(el, 'images/', el, (src => {
						queryform.value[name].push(src)
					}), (err => {

					}), (res => {

					}))
				})
			}
		})
	}

	const handDel = (index, name) => {
		queryform.value[name].splice(index, 1)
	}

	onLoad((e) => {
		queryform.value.orderId = e.id
	})
</script>

<style lang="scss" scoped>
	.form {
		background-color: #fff;
		box-sizing: border-box;
		padding: 24rpx;
		border-radius: 16rpx;

		&:not(:first-child) {
			margin-top: 24rpx;
		}

		&-item {
			&:not(:first-child) {
				margin-top: 40rpx;
			}

			.label {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;

				.tips {
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}

			.zdy-input {
				margin-top: 24rpx;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
			}

			.uplaods {
				margin-top: 24rpx;
				display: flex;
				flex-wrap: wrap;
				gap: 10rpx;

				.upload {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;

					image {
						width: 152rpx;
						height: 152rpx;
					}

					.del {
						position: absolute;
						right: 0;
						top: 0;
						background-color: rgba(0, 0, 0, 0.3);
						color: orangered;
						padding: 5rpx 10rpx;
						border-radius: 0 0 0 20rpx;
					}
				}
			}

			.textarea {
				margin-top: 32rpx;
			}

			.enum {
				.cell {
					margin-top: 48rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.name {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}

					.more {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;

						.to-add {
							color: #F57B01;
						}
					}
				}
			}


			.btns {
				margin-top: 32rpx;
				display: flex;
				align-items: center;

				.cu-btn {
					width: 312rpx;
					height: 88rpx;
					background: #F5F5F5;
					border-radius: 16rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					border: 1rpx solid #F5F5F5;

					&:last-child {
						margin-left: 62rpx;
					}

					&-active {
						background: #FFF7E4;
						border-color: #FF930D;
						color: #FF930D;
					}
				}
			}
		}

		.select {
			display: flex;
			align-items: center;
			box-sizing: border-box;

			&-val {
				flex: 1;
				margin-left: 24rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.place {
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				.to-setting {
					margin-left: 6rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #F57B01;
				}
			}

			.input {
				flex: 1;
				margin-left: 24rpx;
				text-align: right;
			}
		}

		.fangans {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;
			gap: 24rpx;

			.fangan {
				font-size: 30rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				padding: 8rpx 30rpx;
				background: #FFC434;
				border-radius: 10rpx;
				position: relative;

				.icon {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
					width: 24rpx;
					height: 24rpx;
					background: #000000;
					border-radius: 50%;
					display: flex;
					align-items: center;
					color: #fff;
				}
			}
		}

		.submit {
			margin-top: 290rpx;

			.cu-btn {
				width: 686rpx;
				height: 100rpx;
				background: #FFC434;
				border-radius: 16rpx;
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}
	}
</style>